<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Login Page</title>
  <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="header text-center" style="padding: 50px;background-color: #ccc;">
      <br>
      <h2>Login Page</h2>
    </div>
    <div class="loginDiv" style="padding-top: 50px;">
      <form id="loginForm" action="/login" method="post">
        <div class="form-group row">
          <label for="forUsername" class="col-sm-3 col-form-label text-center">Username</label>
          <div class="col-sm-8">
            <input type="text" class="form-control" id="forUsername" name="username" required>
          </div>
        </div>
        <div class="form-group row">
          <label for="forPassword" class="col-sm-3 col-form-label text-center">Password</label>
          <div class="col-sm-8">
            <input type="password" class="form-control" id="forPassword" name="password" required>
          </div>
        </div>
        <div class="form-group row">
          <div class="col-sm-3"></div>
          <div class="col-sm-8">
            <button type="submit" class="btn btn-primary btn-block">Sign in</button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="/node_modules/jquery/dist/jquery.min.js"></script>
  <script>
    $(function () {
      $('#loginForm').on('submit', function (e) {
        e.preventDefault()
        var formData = $(this).serialize()
        $.ajax({
          url: '/login',
          type: 'post',
          data: formData,
          success: function (data) {
            if (data.err_code === 0) {
              window.alert(data.root.username + '登陆成功...')
              window.location.href = '/'
            } else if (data.err_code === 1) {
              window.alert('登陆失败...')
            } else if (data.err_code === 500) {
              window.alert('服务器忙，请稍后重试！')
            }
          }
        })
      })
    })
  </script>
</body>
</html>